<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>clock</title>
    <style>

        *{margin:0;padding:0;}
        html,body{width:100%;height:100%;background:#148a80;}
        canvas{
            float:left;
            box-shadow:0 0 10px 0 #000;
            background: transparent;
        }
    </style>
    <script src="canvas.js"></script>
</head>
<body>
<canvas id="clock"></canvas>
<canvas id="ball"></canvas>
<script>
    var obj1,obj2;
    function draw(){
        var w=document.getElementsByTagName("body")[0].offsetWidth;
        var h=document.getElementsByTagName("body")[0].offsetHeight;
        //clock
        var cans=document.getElementById("clock");
        cans.width=w/2;
        cans.height=h;
        var r=cans.width/2;
        var rem=cans.width/200;
        var clock=new Clock(cans,r,rem);
        clearInterval(obj1);
        obj1=setInterval(()=>{
            clock.init();
        },1000);

        //dynamic ball
        var cans1=document.getElementById("ball");
        var ctx=cans1.getContext("2d");
        cans1.width=w/2;
        cans1.height=h;
        cans1.style.backgroundColor="#000";
        var ballArr=[];
        var colorArr=["red","blue","yellow","green","orange","pink","purple","brown","chocolate","white","gray","silver"];
        cans1.addEventListener("mousemove",(e)=>{
            e=e||event;
            //ballArr.push(new DynamicBall(e.offsetX,e.offsetY,8*rem,colorArr[DynamicBall.getRandomNum(0,colorArr.length-1)],ctx));
            ballArr.push(new DynamicBall(e.offsetX,e.offsetY,8*rem,rgb(),ctx));
        });

        clearInterval(obj2);
        obj2=setInterval(()=>{
            ctx.clearRect(0,0,cans1.width,cans1.height);
            ctx.save();
            ctx.beginPath();
            ctx.font=10*rem+"px 楷体";
            ctx.textAlign="center";
            ctx.textBaseline="top";
            ctx.fillStyle=rgb();
            ctx.fillText("请移动鼠标",ctx.canvas.width/2,4*rem);
            ctx.restore();
            for(let i=0;i<ballArr.length;i++){
                ballArr[i].render();
                ballArr[i].update();
            }
        },30);
    }
    draw();
    window.onresize=function(){
        draw();
    }
    function rgb(){//rgb颜色随机
        var r = Math.floor(Math.random()*256);
        var g = Math.floor(Math.random()*256);
        var b = Math.floor(Math.random()*256);
        var rgb = 'rgb('+r+','+g+','+b+')';
        return rgb;
    }
</script>
</body>
</html>